<template>



	<view style="width: 100%;">

		<swiper :interval="3000" :duration="1000" style="height: 1000rpx;" :current="current" >
			<swiper-item v-for="item in test" :key="item.id" @touchmove.stop>
				<view class="fa">
					<view style="padding: 30rpx 0; width: 100%;font-size: 32rpx;color: #000;font-weight: bold;">
						{{item.id}}.{{item.questions}}
					</view>
					<view @click="NavClick(item.id)" v-for="choice in item.answer" :key="item"
						style="padding: 30rpx 0;border-top: 1rpx solid #dddddd; width: 100%;font-size: 26rpx;color: #666666;">
						{{choice}}
					</view>
					<view v-if="testNum<=10" style="width: 100%;height: 10rpx;background-color: #dddddd;margin-top: 250rpx;">
						<view ref="width" :style="{width: (10*testNum)+'%'}" class="main"></view>
					</view>
				</view>

			</swiper-item>
		</swiper>
		
		
		
		<view class="fa" v-if="testNum>10" style="position: absolute;top: 0;">
			<view class="header">
				<view class="" style="font-size: 64rpx;font-weight: bold;text-align: center;">
					保守型
				</view>
				<text style="color: #666666;margin-top: 20rpx;font-size: 30rpx;">有效期至:2022-03-01</text>
			</view>
			<view class="fen_main">
				<view class="fen">
					<text style="color: #999999;">风险承受能力</text>
					<view style="display: flex;">
						<view class="bblue"></view>
						<view class="bblue"></view>
						<view class="bblue"></view>
						<view class="noBlue"></view>
						<view class="noBlue"></view>
					</view>
				</view>
				<view class="fen" style="margin-top: 50rpx;">
					<text style="color: #999999;">期望投资收益</text>
					<view style="display: flex;">
						<view class="bblue"></view>
						<view class="bblue"></view>
						<view class="noBlue"></view>
						<view class="noBlue"></view>
						<view class="noBlue"></view>
					</view>
				</view>
			</view>
			<view style="width: 100%;padding: 0 24rpx;margin-top: 50rpx;color: #666666;font-size: 30rpx;line-height: 50rpx;padding-bottom: 30rpx;">
				您的风险承受能力较低，适合投资低风险、中低风险产品;除此之外的中风险、中高风险、高风险产品超出了您的风险承受能力，请谨慎选择
			</view>
		</view>
		<view class="tips" v-if="testNum<=test.length">
			温馨提示:填写进行测评问卷时，请您确保选项真实、准确、完整和有效可靠。如问卷中存在欺诈、隐瞒或有其他不实陈述而导致问卷结果与投资实际情况不符，甚至出现投资亏损等情况的,本平台及合作机构不承担任何责任。
		</view>
		<view v-if="testNum>10" class="tips" style="margin-top: -100rpx;font-size: 30rpx;color: #999999;line-height: 44rpx;display: flex;">
			<label class="radio" style="margin-top: -6rpx;margin-right: 8rpx;">
				<radio style="transform: scale(0.6);" value="" class="round blue" checked=""/><text></text>
			</label>
			我已了解：我是保守型的投资者，本产品为低风险符合我的风险承受能力
			
		</view>
		<view v-if="testNum>10" style="width: 100%;padding: 0 24rpx;">
			<view @tap="toContact" style="margin-top: 50rpx;width: 100%;font-size: 30rpx;height: 100rpx;text-align: center;line-height: 100rpx;color: white;background-color: #0081FF;">
				继续购买
			</view>
			<view @tap="toFund" style="margin-top: 50rpx;width: 100%;font-size: 30rpx;height: 100rpx;text-align: center;line-height: 100rpx;background-color: white;">
				暂不购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				test: [{
						id: 1,
						questions: '您的学历？',
						answer: ['a.硕士及以上', 'b.本科', 'c.大专', 'd.高中 / 中专', 'e.初中及以下']
					},
					{
						id: 2,
						questions: '过去一年内购买过不同金融产品的数量？',
						answer: ['a.12个以上', 'b.11-15个', 'c.6-10个', 'd.5个以下', 'e.没有']
					},
					{
						id: 3,
						questions: '您的家庭除日常开销外可用于投资的资产？',
						answer: ['a.20万以上', 'b.15-20万', 'c.5-10万', 'd.5万以下', 'e.没有']
					},
					{
						id: 4,
						questions: '您目前所处的年龄阶段？',
						answer: ['a.56岁以上', 'b.46-55岁', 'c.36-44岁', 'd.28-35岁', 'e.18-28岁']
					},
					{
						id: 5,
						questions: '到目前为止，您已有多少年投资经验？',
						answer: ['a.10年以上', 'b.6-10年', 'c.3-5年', 'd.1-3年', 'e.少于1年']
					},
					{
						id: 6,
						questions: '您预期的投资期限是？',
						answer: ['a.10年以上', 'b.6-10年', 'c.3-5年', 'd.1-3年', 'e.少于1年']
					},
					{
						id: 7,
						questions: '您投资的主要目的是什么？',
						answer: ['a.关心长期的高回报，能够接受短期的资产价值波动', 'b.倾向长期的成长，较少关心短期的汇报及波动', 'c.希望投资能获得一定的增值，同时获得适度的年回报',
							'd.只想确保资产的安全性，同时希望能够得到固定的收益', 'e.希望利用投资及所获得的收益在短期内内用于购买计划'
						]
					},
					{
						id: 8,
						questions: '如果发送亏损哪项符合您的态度？',
						answer: ['a.如果发送亏损，我并不在乎', 'b.我能承受25%的亏损', 'c.我能承受10%的亏损', 'd.我几乎不能承受任何亏损',
							'e.我需要至少获得高于一年定期存款利率的收益'
						]
					},
					{
						id: 9,
						questions: '以三年的期限来说，您希望您的投资？',
						answer: ['a.超越股市整体增长30%以上', 'b.超越股市整体增长10-30%', 'c.与股市保持同步增长', 'd.略微滞后股市的整体增长', 'e.无所谓']
					},
					{
						id: 10,
						questions: '您的家庭目前年收入状况？',
						answer: ['a.50万元以上', 'b.30-50万元', 'c.15-30万元', 'd.5-15万元', 'e.5万元以下']
					},
				],
				testNum: 1,
				wid: 10,
				current: 0,
			}
		},
		methods: {
			NavClick(index) {
				this.current = index
				this.testNum++
				if (this.testNum > this.test.length) {
					uni.setNavigationBarTitle({
						title: '测评结果'
					});
				}
			},
			toContact(){
				uni.navigateTo({
					url:'../fund_contact/fund_contact'
				})
			},
			toFund(){
				uni.navigateTo({
					url:'../fund_details/fund_details'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F3F3F3;
	}
	.fa {
		width: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: white;
		display: inline-block;
		/* #ifndef MP-WEIXIN */
		padding-top: 100rpx;
		/* #endif */
	}

	.main {
		height: 10rpx;
		background-color: #007AFF;
	}

	.tips {
		font-size: 25rpx;
		color: #999999;
		margin-top: -50rpx;
		padding: 0 28rpx;
		line-height: 40rpx;
	}
	.header{
		margin-top: 100rpx;
		width: 100%;
		text-align: center;
	}
	.fen_main{
		margin-top: 50rpx;
		width: 100%;
		padding: 40rpx 24rpx;
		border-top: 1rpx solid #dddddd;
		border-bottom: 1rpx solid #dddddd;
	}
	.fen{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bblue{
		width: 60rpx;
		margin-right: 4rpx;
		height: 5rpx;
		background-color: #007AFF;
	}
	.noBlue{
		
			width: 60rpx;
			margin-right: 4rpx;
			height: 5rpx;
			background-color: #cccccc;
	}
</style>
